<template>
    <div class="content">
        <router-link to="/app/adminManager"><el-button  icon="information">管理员列表</el-button></router-link>
        <router-link to="/app/needAddBook"><el-button  icon="circle-check">需添加的小说</el-button></router-link>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="adminid"
                    label="管理员Id"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="adminname"
                    label="管理员名称"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="power"
                    label="管理员权限"
                    width="170px">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="130">
                <template scope="scope">
                    <el-button @click="deleteAdmin(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <p class="title">添加管理员</p>
        <el-form :model="addAdminForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="帐号" prop="account">
                <el-input v-model="addAdminForm.account" placeholder="账号由5位以上小写英文组成" @blur="checkAccount"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="power">
                <el-input v-model="addAdminForm.power"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="addAdminForm.pass" auto-complete="off" placeholder="密码为6-16数字和字母组成" @blur="checkPass"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPass">
                <el-input type="password" v-model="addAdminForm.confirmPass" auto-complete="off" @blur="checkPassAgain"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sendAdminForm">提交</el-button>
                <el-button @click="resetForm('addAdminForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { Message } from 'element-ui';
    import util from 'utility';
    export default {
        data:function(){
            return {
                accountTips:"",
                passTips:"",
                confirmTips:"",
                addAdminForm: {
                    pass: '',
                    confirmPass: '',
                    account: '',
                    power:'normal'
                },
                tableData:[]
            }
        },
        methods:{
            //获取所有管理员
            getAllAdmin(){
                this.$http.get('http://localhost/api/getAllManager').then(function (result) {
                    this.tableData = result.body;
                })
            },
            deleteAdmin(row){
                console.log(row.account);
                this.$http.post('http://localhost/api/deleteAdmin',{adminname:row.adminname},{emulateJSON:true}).then(function (result) {
                    Message({
                        message:result.body.message
                    });
                    this.getAllAdmin();
                })
            },
            //验证管理员账号是否合格
            checkAccount:function(){
                let _this = this;
                if(!/[a-z]{3,}/.test(this.addAdminForm.account)){
                    Message({
                        message:"请输入英文字母"
                    });

                }else {
                    this.$http.post('http://localhost/api/CheckAccount', {account: this.addAdminForm.account}, {emulateJSON: true}).then(function (result) {
                        if (result.body.message == "帐号已存在") {
                            _this.accountTips = '帐号已存在'
                        }else{
                            _this.accountTips = '';
                        }
                    })
                }
            },
            //验证密码号是否合格
            checkPass:function(){
                if(!(/^(?![^a-zA-Z]+$)(?!\D+$).{6,16}/.test(this.addAdminForm.pass))){
                    Message({
                        message:"密码为6-16数字和字母组成"
                    })
                }
            },
            //确认密码
            checkPassAgain:function(){
                if(this.addAdminForm.confirmPass != this.addAdminForm.pass){
                    Message({
                        message:"密码不一致"
                    })
                }
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //提交表单
            sendAdminForm:function(){
                var password = util.md5(this.addAdminForm.pass+this.addAdminForm.account);
                this.$http.post('http://localhost/api/sendAdminForm',{adminname:this.addAdminForm.account,adminpassword:password,power:this.addAdminForm.power},{emulateJSON:true}).then(function(result){
                    Message({
                        message:result.body.message
                    });
                    this.getAllAdmin();
                })
            }
        },
        created:function () {
            this.getAllAdmin();
        }
    }
</script>
<style scoped>
    .content{
        padding:20px 740px 0 20px;
    }
    .content>.title{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 40px;
        margin-left: 98px;
        margin-top: 20px;
    }
</style>